<!-- 客户对账表 -->
<template>
  <view>
    <hx-navbar class="z-2" ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <!-- <u-scroll-list zIndex='9999' :indicator="false" class="p-b-0 "> -->
      <view class="top-view p-t-20 z-99999 ">
        <view class="flex flex-sa f-35 m-b-10">
          <view class="f-35 t_item">
            <view class="flex flex-c f-32 text-color"> 前欠 </view>
            <view class="flex flex-c f-30 m-b-10">
              {{ total_data.originDebt || 0 }}
            </view>
          </view>
          <view class="f-35 t_item">
            <view class="flex flex-c f-32 text-color"> 销售额 </view>
            <view class="flex flex-c f-30 m-b-10">
              {{ total_data.debtNewly || 0 }}
            </view>
          </view>
          <view class="f-35 t_item">
            <view class="flex flex-c f-32 text-color"> 退货额 </view>
            <view class="flex flex-c f-30 m-b-10">
              {{ total_data.canUseQuantity || 0 }}
            </view>
          </view>
        </view>
        <template v-if="isMore">
          <view class="flex flex-sa f-35 m-b-10">
            <view class="f-35 t_item">
              <view class="flex flex-c f-32 text-color"> 采购额 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ total_data.canUsePiecesCount || 0 }}
              </view>
            </view>
            <view class="f-35 t_item">
              <view class="flex flex-c f-32 text-color"> 退货额 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ total_data.canUseQuantity || 0 }}
              </view>
            </view>
            <view class="f-35 t_item">
              <view class="flex flex-c f-32 text-color"> 收款额 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ total_data.debtNewly || 0 }}
              </view>
            </view>
          </view>
          <view class="flex flex-sa f-35">
            <view class="f-35 t_item">
              <view class="flex flex-c f-32 text-color"> 其他额 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ total_data.canUsePiecesCount || 0 }}
              </view>
            </view>
            <view class="f-35 t_item">
              <view class="flex flex-c f-32 text-color"> 累欠 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ total_data.debtTotal || 0 }}
              </view>
            </view>
          </view>
        </template>
        <view class="more-view flex" @click="showMore">
          <template v-if="isMore">
            <text>收起</text>
            <u-icon name="arrow-up" color="#dfdfdf" size="20"></u-icon>
          </template>
          <template v-else>
            <text>更多</text>
            <u-icon name="arrow-down" color="#dfdfdf" size="20"></u-icon>
          </template>
        </view>
      </view>
    <!-- </u-scroll-list> -->
    <u-sticky offset-top="0" zIndex='1'>
      <!-- defaultTime="setThisMonth" -->
      <c-time @success="timeSuccess">
        <view class="flex opt-view" slot="content">
          <view 
					class="check-account flex select-item m-r-40">
              <text 
                @click="goRoute( 'pages/application/pages/cloth/sales-ticket/index?page=return&type=return')" class="grey p-r-10">{{params.data.customerName || '客户'}} </text>
              <u-icon v-if="!params.data.customerName"  name="arrow-down-fill" color="#ccc" size="10"></u-icon>
              <text @click="delectCustomer()" v-else class="c-99" >x</text>
          </view>
          <view @click="goRoute('pages/selects/salesman/index')" class="check-account flex select-item">
            <text class="grey p-r-10">{{billId.data.realName || '业务员'}}</text>
            <u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
          </view>
        </view>
      </c-time>
    </u-sticky>
  
    <view class="list-view p-t-20">
      <view
        class="item-view"
        v-for="(item) in indexList"
        :key="item.id"
        @click="toNext(item)"
      >
        <view class="name">
          {{ item.name }}
        </view>
        <view class="dl-view m-b-20 flex">
          <view class="dt-view">
            <text class="grey">前欠</text>
            <text class="p-l-6">{{
              item.originDebt ? "-" + item.originDebt : 0
            }}</text>
          </view>
          <view class="dd-view">
            <text class="grey">累欠</text>
            <text class="p-l-6">{{
              item.debtTotal ? "-" + item.debtTotal : 0
            }}</text>
          </view>
        </view>
        <view class="info-list">
          <view class="dl-item">
            <view class="dt">
              <text class="grey">销售额</text>
              <text class="p-l-6">{{ item.saleTotalPrice || 0}}</text>
            </view>
              <view class="dd">
              <text class="grey">退货额</text>
              <text class="p-l-6">{{ item.saleReturnTotalPrice || 0}}</text>
            </view>
          </view>
          <view class="dl-item">
            <view class="dt">
              <text class="grey">采购额</text>
              <text class="p-l-6">{{ item.saleTotalPrice || 0}}</text>
            </view>
            <view class="dd">
              <text class="grey">退货额</text>
              <text class="p-l-6">{{ item.purchaseReturnTotalPrice || 0}}</text>
            </view>
          </view>
          <view class="dl-item">
            <view class="dt">
              <text class="grey">收款额</text>
              <text class="p-l-6">{{ item.debtReceive || 0}}</text>
            </view>
            <view class="dd">
              <text class="grey">调账金额</text>
              <text class="p-l-6">{{item.amountAdjust || 0}}</text>
            </view>
          </view>
          <view class="dl-item">
            <view class="dt">
              <text class="grey">销售匹</text>
              <text class="p-l-6">{{ item.salePiecesCount || 0}}</text>
            </view>
            <view class="dd">
              <text class="grey">销售数</text>
              <text class="p-l-6">{{ item.saleQuantity || 0}}</text>
            </view>
          </view>
          <!-- <view class="dl-item p-b-0">
            <view class="dt">
              <text class="grey">抵定金</text>
              <text class="p-l-6">0</text>
            </view>
          </view> -->
        </view>
      </view>
      <!-- <loading-finished v-if="isLoadFinished"></loading-finished> -->
      <u-loadmore
        dashed
        line
        :status="status"
        loadingText="努力加载中"
        loadmoreText="轻轻上拉"
        nomoreText="实在没有了"
      />
    </view>
    <!-- 筛选弹框 侧边栏 -->
    <u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close" @open="open">
      <view class="pop-view p-t-302">
        <view>
          <!-- <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;" @click="toCategory">
              <view class="title">
                类别
              </view>
              <view class="value" v-if="params.data.catName">
                {{ params.data.catName }}
              </view>
            </view>
            <view class="icon">
              <u-icon name="close" color="#999" size="20" v-if="params.data.catName" @click="() => {
                params.data.catName = null; params.data.catId = null;
              }"></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;" @click="toShop">
              <view class="title">
                门店
              </view>
              <view class="value" v-if="params.data.shop">
              </view>
            </view>
            <view class="icon">
              <u-icon name="close" color="#999" size="20" v-if="params.data.shop" @click="params.data.shop = ''"></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;" @click="toShop">
              <view class="title">
                标签
              </view>
              <view class="value" v-if="params.data.shop">
              </view>
            </view>
            <view class="icon">
              <u-icon name="close" color="#999" size="20" v-if="params.data.shop" @click="params.data.shop = ''"></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view> -->
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;">
              <view class="title">
                显示停用
              </view>
              <view class="value">
                <u-switch v-model="params.data.isEnable" size="18"></u-switch>
              </view>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1;">
              <view class="title">
                隐藏0欠款
              </view>
              <view class="value">
                <u-switch v-model="params.data.inventory" size="18"></u-switch>
              </view>
            </view>
          </view>
        </view>
        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
          <u-button text="重置" shape="circle" class="reset m-r-10" @click="() => {
            show = false
          }"></u-button>
          <u-button text="搜索" shape="circle"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
            @click="onSearch"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import cTime from "@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue";
import { listDataGroupByCustomerPage,executePage } from "@/apis/bill/reconciliation";
// import loadingFinished from '@/components/loading-finished/index.vue'
export default {
  name: "Custom",
  components: {
    cTime,
    // loadingFinished
  },
  data() {
    return {
      config: {
        title: "客户对账表",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      isMore: false,
      total_data: {},
      params: {
        data: {
          hideZeroDebt: true,
          beginTime:null,
          endTime:null,
          sqlMark: "RECONCILIATION_CUSTOMER_GROUP",
          customerId:null,
          customerName:null,
        },
        page: {
          current: 1,
          size: -1,
          total: 0
          // order: "desc",
        },
      },
      indexList: [],
      time: "",
      total: 0,
      // isLoadFinished: false
      status: "loadmore",
      show:false,
      billId: {
        data: {
          keywords: "",
          realName:''
        },
      },
    };
  },
  onLoad() {
    this.getList();
    this.getGroupBy()
    // 客户
    uni.$on("on-sales-ticket", (data) => {});
  },
  onShow() {
    uni.$on("on-sales-ticket", (data) => {
      this.params.data.customerName = data.name
      this.params.data.customerId = data.id
      this.indexList = []
      this.getList()
      uni.$off("on-sales-ticket");
    });
    uni.$on("on-selected-salesman", (data) => {
      this.billId.data.realName = data.realName
      uni.$off("on-selected-salesman");
    });
    
  },
  onUnLoad() {
    uni.$off("on-sales-ticket");
  },
  onReachBottom() {
    if (this.indexList.length < this.total) {
      // this.isLoadFinished = false;
      this.status = "loadmore";
      this.params.page.current++;
      this.getList();
    } else {
      this.status = "nomore";
      // this.isLoadFinished = true;
    }
  },
  methods: {
    // 侧边栏
    close() {
      this.show = false
    },
    open() {

    },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true
      }
    },
    delectCustomer(){
      this.params.data.customerName = null
      this.params.data.customerId = null
      this.getList()
    },
    showMore() {
      this.isMore = !this.isMore;
    },
    // 获取时间参数
    timeSuccess(val) {
      this.time = `${val[0]}~${val[1]}`;
      this.indexList = []
      this.params.data.beginTime = val[0]
      this.params.data.endTime = val[1]
      this.getList()
    },
    // 路由跳转
    goRoute(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 列表
    getGroupBy() {
      uni.showLoading({
        title: "加载中...",
      });
      listDataGroupByCustomerPage(this.params)
        .then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.total_data = data.footerTotal || {};
          uni.hideLoading();
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    getList() {
      uni.showLoading({
        title: "加载中...",
      });
      executePage(this.params)
        .then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.total = data.total || 0;
          if (this.params.page.current == 1) {
            this.indexList = data.records;
          } else {
            this.indexList = [...data.records, ...this.indexList];
          }
          uni.hideLoading();
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    // 跳转下一页
    toNext(val) {
      let { id, name } = val;
      uni.navigateTo({
        url: `/pages/application/pages/finance/reconciliation/custom/list?customerId=${id}&customerName=${name}&time=${this.time}`,
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.top-view {
  flex: 1;
  z-index: 2;
    position: sticky;
  background: linear-gradient(
    to right,
    rgb(64, 158, 255),
    rgb(64, 158, 255),
    rgb(96, 180, 246),
    rgb(96, 180, 246)
  );
  color: #fff;
  .t_item {
    flex: 1;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 1rpx;
      height: 70%;
      background: #dfdfdf;
    }
    &:last-child {
      &::after {
        content: "";
        width: 0rpx;
      }
    }
  }
  .more-view {
    justify-content: center;
    height: 80rpx;
    align-items: center;
  }
}
.list-view {
  .item-view {
    background: #fff;
    padding: 20rpx;
    .name {
      font-weight: bold;
      padding-bottom: 10rpx;
    }
    .dl-view {
      justify-content: space-between;
    }
    .info-list {
      background: #f2f2f2;
      padding: 20rpx;
      .dl-item {
        display: flex;
        padding-bottom: 8rpx;
        .dt,
        .dd {
          flex: 1;
        }
      }
    }
  }
}
</style>

